
<div id="chromeViewMenu">
	<span> HelloSlim </span>
	<% if( App.user ){ %>
		<!-- main icons to the left -->
		<a href="#" class="home active">
			<i class="icon-home"> </i>
		</a>
		<a href="#agenda" class="agenda">
			<i class="icon-calendar"></i>
		</a>
		<a href="#health" class="health">
			<i class="icon-heart"></i>
		</a>
		<a href="#billing" class="billing">
			<i class="icon-file"></i>
		</a>
		<!-- special icons to the right -->
		<div style="float:right;">
			<span><%= App.user.attributes['name'] %></span>
			<a href="#company" class="company">
				<i class="icon-user"></i>
			</a>
			<a href="#" class="logout">
				<i class="icon-off"></i>
			</a>
		</div>
	<% } %>
</div>

<div id="chromeViewContent">
</div>

<% if( ! App.user ){  %>
	<div class="modal hide fade" id="loginModal">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			<h3>Login</h3>
		</div>
		<div class="modal-body">
	
			<form>
			
				<label for="email">Username</label>
				<input id="email" type="text" value="joao@slim.com" />
				
				<label for="password">Password</label>
				<input id="password" type="password" value="joao" />
		
			</form>
	
		</div>
		<div class="modal-footer">
			<button type="button" class="btn btn-primary login">Login</button>
			<button type="button" class="btn register">Register</button>
		</div>
	</div>
	<script>
		$(function(){
			$("#loginModal").modal();
			$('#loginModal').on('shown', function () { $("#loginModal .btn-primary").focus(); });
		});
	</script>
<% } %>
